@use 'sass:map';
@use '@material/list/evolution-mixins' as mdc-list-mixins;
@use '@material/list/evolution-variables' as mdc-list-variables;
@use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup;
@use '../tokens/token-utils';
@use '../mdc-helpers/mdc-helpers';

.mat-mdc-optgroup {
  // These tokens are set on the root option group to make them easier to override.
  @include token-utils.use-tokens(
    tokens-mat-optgroup.$prefix, tokens-mat-optgroup.get-token-slots()) {
    @include token-utils.create-token-slot(color, label-text-color);
    @include token-utils.create-token-slot(font-family, label-text-font);
    @include token-utils.create-token-slot(line-height, label-text-line-height);
    @include token-utils.create-token-slot(font-size, label-text-size);
    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
    @include token-utils.create-token-slot(font-weight, label-text-weight);
  }
}

.mat-mdc-optgroup-label {
  @include mdc-list-mixins.item-base;
  @include mdc-list-mixins.item-spacing(
    mdc-list-variables.$side-padding, $query: mdc-helpers.$mdc-base-styles-query);

  // Set the `min-height` here ourselves, instead of going through
  // the `mdc-list-one-line-item-density` mixin, because it sets a `height`
  // which doesn't work well with multi-line options.
  $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
  min-height: map.get($height-config, default);

  &.mdc-list-item--disabled {
    // This is the same as `mdc-list-mixins.list-disabled-opacity` which
    // we can't use directly, because it comes with some selectors.
    opacity: mdc-list-variables.$content-disabled-opacity;
  }

  // Needs to be overwritten explicitly, because the style can
  // leak in from the list and cause the text to truncate.
  .mdc-list-item__primary-text {
    // MDC assigns the typography to this element, rather than the element itself, which will break
    // existing overrides. Set all of the typography-related properties to `inherit` so that any
    // styles set on the host can propagate down.
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    font-family: inherit;
    text-decoration: inherit;
    text-transform: inherit;
    white-space: normal;
  }
}
